/*
 * @Author: 康为 18037890117@163.com
 * @Date: 2023-08-07 13:46:20
 * @LastEditors: 康为 18037890117@163.com
 * @LastEditTime: 2023-08-08 15:50:07
 * @FilePath: /umi-max/src/pages/Three/index.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import * as React from 'react';
import { PageContainer } from '@ant-design/pro-components';
import { Button } from 'antd';

/* 获取随机颜色 */
function getColor() {
  const r = Math.floor(Math.random() * 255);
  const g = Math.floor(Math.random() * 255);
  const b = Math.floor(Math.random() * 255);
  return 'rgba(' + r + ',' + g + ',' + b + ',0.8)';
}
/* 获取随机位置 */
function getPostion(position) {
  const { width, height } = position;
  return {
    left: Math.ceil(Math.random() * width) + 'px',
    top: Math.ceil(Math.random() * height) + 'px',
  };
}
/* 色块组件 */
function Circle({ position }) {
  const style = React.useMemo(() => {
    //用useMemo缓存，计算出来的随机位置和色值。
    return {
      background: getColor(),
      width: 10,
      height: 10,
      borderRadius: '50%',
      ...getPostion(position),
    };
  }, []);
  return <div style={{ position: 'relative', ...style }} className="circle" />;
}

function ThreeScence() {
  const [visible, setVisible] = React.useState(false);
  const [dataList, setDataList] = React.useState<any[]>([]);
  const [renderList, setRenderList] = React.useState<any[]>([]);
  const [position, setPosition] = React.useState({ width: 0, height: 0 });
  const divRef = React.useRef<HTMLDivElement | null>(null);

  React.useEffect(() => {
    console.log(divRef.current);
    if (divRef.current) {
      const originList = new Array(2000).fill(1);
      const width = divRef.current?.offsetWidth || 0;
      console.log(width);

      const height = divRef.current?.offsetHeight || 0;
      setDataList(originList);
      setRenderList(originList);
      setPosition({ width, height });
    }
  }, [divRef]);

  return (
    <PageContainer
      className="flex"
      pageHeaderRender={false}
      style={{ width: '100%', height: '100%' }}
    >
      <div style={{ width: '1000px', height: '800px' }}>
        <Button onClick={() => setVisible(true)} type="primary">
          渲染
        </Button>
        {visible && (
          <div
            className="bigData"
            ref={divRef}
            style={{ width: '1000px', height: '800px' }}
          >
            {renderList.map((item, i) => (
              <Circle key={i} position={position} />
            ))}
          </div>
        )}
      </div>
    </PageContainer>
  );
}

export default ThreeScence;
